<template>
  <div class="div-tl"  > 
    <div>
      <p1>设备</p1>
        <el-select v-model="choose_devName" clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in lists"
            :key="item.devName"
            :label="item.label"
            :value="item.devName">
          </el-option>
        </el-select>
<!-- [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] 
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]--> 
      <p1>位置</p1>
        <el-select v-model="choose_devPosition" clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in lists"
            :key="item.devPosition"
            :label="item.label"
            :value="item.devPosition">
          </el-option>
        </el-select>
      <p1>设备型号</p1>
        <el-select v-model="choose_devModel" clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in lists"
            :key="item.devModel"
            :label="item.label"
            :value="item.devModel">
          </el-option>
        </el-select>
      </div>

  <el-tabs v-model="active">
    <el-tab-pane label="时间段选择" name="times"></el-tab-pane>
    <el-tab-pane label="时间选择" name="time"></el-tab-pane>
  </el-tabs>

    <div class="flex" v-if="active=='times'">
        <div>
            <calendar :events="calendar2.events" :range="calendar2.range" :lunar="calendar2.lunar" :value="calendar2.value"  @select="calendar2.select"></calendar>
        </div>
    </div>
  
  <div v-else>

  <el-row :gutter="20" type="flex">

    <el-col :span="4" :offset="2">
      <el-card>
      <el-date-picker
      v-model="day"
      type="date"
      placeholder="选择日期"
      format="yyyy 年 MM 月 dd 日"
      @change="">
    </el-date-picker>
    </el-card>
    </el-col>
    <el-col :span="16" >
      <el-card>
        <div align="center" style="height:40px;">
          <span>设备名称</span>
          <span>&nbsp;&nbsp;&nbsp;</span>
          <span>{{day.toLocaleDateString()}}</span>
          <span>&nbsp;&nbsp;&nbsp;</span>
          <span>使用情况</span>
        </div>

      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" type="flex">
    <el-col :span="2"  >

        <div align="center" style = "padding-top: 300px;height:490px;"> 
        <el-button type = "text" @click="dayBefore()" >
          <i class="el-icon-d-arrow-left"></i>
          前一天
        </el-button>
        </div>
    </el-col>
    <el-col :span="20">
  <el-row :gutter="30" type="flex">
    <el-col :span="6">
      <el-card style="height:150px;" >
        <div slot="header" class="clearfix" style="height:25px;">
            <div>
              <el-col :span="13" class="myPadding">
                <span style="font-weight:bold;font-size:18px;">{{item[0]}}</span>
              </el-col>
              <el-col :span="3" :offset="6">
                <el-button  
                icon="el-icon-check" 
                v-if="isFree[item[0]]" 
                circle style="float:right;"
                v-bind:class="{'el-button el-button--success is-circle':isClick[item[0]] }"
                @click="isClick[item[0]] = !isClick[item[0]]">

                </el-button>
              </el-col>
            </div>
        </div>
        <div align="center" style="font-size:16px;" >
            <span class="circle" v-bind:class="{'circle_free':isFree[item[0]] }">●</span>
            <el-tooltip class="item"  effect="dark" content="Top Left 提示文字" placement="top-start">
            <span v-if = "isFree[item[0]]">空闲中</span>
            <span v-else >已使用</span>
            </el-tooltip>

        </div>

      </el-card>
    </el-col>
  </el-row>






    </el-col>
    <el-col :span="2">
        <div align="center" style = "padding-top: 300px;height:490px;"> 
        <el-button type = "text" @click="dayAfter()" >
          后一天
        <i class="el-icon-d-arrow-right"></i>
        </el-button>
        </div>
    </el-col>
  </el-row>
  </div>


  <el-row :gutter="20" >
    <div align="center">
      <el-button type = "success" @click="showDialog()" align="center" >
        立即预约
      </el-button> 
    </div>
  </el-row>

    <el-dialog title="预约详情" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;' > 
        <el-form-item label="用户名称" >
          {{dialogData.username}}
        </el-form-item>
        <el-form-item label="设备信息" >
          {{dialogData.devId}}
        </el-form-item >
        <el-form-item label="预约日期" >
          {{dialogData.day}}
        </el-form-item >
        <el-form-item label="预约时间" >
          <span v-for="item in dialogData.usetime">
            {{item}}
          </span>
          
        </el-form-item >
      </el-form>
      <div slot="footer" >
        <el-button type = "success" @click="updateDialog()" >
          确定
        </el-button>
      </div>

    </el-dialog>


  </div>
</template>
<script>
import global from '../../Global'
import calendar from './calendar.vue'
  export default {
    components: {
        calendar
    },
    data() {
      return {
        day:'',
        active:'times',
        lists:{
          value:'',
          label:''
        },
        choose_devName:'',
        choose_devPosition:'',
        choose_devModel: '',
        listLoading: false,
        calendar2:{
            range:true,
            value:[(new Date()).toLocaleDateString().split('/'),(new Date()).toLocaleDateString().split('/')], //默认日期
            lunar:false, //显示农历
            //begin:[2017,2,16], //可选开始日期
            //end:[2019,2,16],   //可选结束日期
            
            events:{
                '2019-4-14':'预约人：xxx 项目：xxx','2019-4-15':'$460','2019-4-16':'$500',
            },
            select(begin,end){
                  console.log(begin.toString(),end.toString());
            }
        },

        flag:true,
        list:[],
        info:{},
        dialogFormVisible : false,
        deviceId:global.obj.devId,
        mianData:'',
        day:global.obj.day,
        dialogData:{
          username:global.obj.nickName,
          usetime:[],
          day:'',
          devId:global.obj.devId
        },
        
        item:[
          "07:00-08:00",
          "08:00-09:00",
          "09:00-10:00",
          "10:00-11:00",
          "11:00-12:00",
          "12:00-13:00",
          "13:00-14:00",
          "14:00-15:00",
          "15:00-16:00",
          "16:00-17:00",
          "17:00-18:00",
          "18:00-19:00",
        ],

        isFree:{
          "07:00-08:00":true,
          "08:00-09:00":true,
          "09:00-10:00":true,
          "10:00-11:00":true,
          "11:00-12:00":true,
          "12:00-13:00":true,
          "13:00-14:00":true,
          "14:00-15:00":true,
          "15:00-16:00":true,
          "16:00-17:00":true,
          "17:00-18:00":true,
          "18:00-19:00":true,
        },
        isClick:{
          "06:00-07:00":false,
          "07:00-08:00":false,
          "08:00-09:00":false,
          "09:00-10:00":false,
          "10:00-11:00":false,
          "11:00-12:00":false,
          "12:00-13:00":false,
          "13:00-14:00":false,
          "14:00-15:00":false,
          "15:00-16:00":false,
          "16:00-17:00":false,
          "17:00-18:00":false,
          "18:00-19:00":false,
        }
      }
    },
    created() {//钩子函数创建时调用
      this.getList();
      //this.getDate();
    },
    methods: {
      getList(){
       //查询列表
        this.listLoading = true;
        this.api({
          url: "/devices/listDevices",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.lists = data.list;
          this.totalCount = data.totalCount;
        })
      },
      
      dayBefore(){
        var value = this.day.getTime();
        value -= (24 * 3600 * 1000);
        this.day = new Date(value);
        this.getDate();
      },
      dayAfter(){
        var value = this.day.getTime();
        value += (24 * 3600 * 1000);
        this.day = new Date(value);
        this.getDate();
      },
      dayChange(){
        console.log(this.day);
        if(this.day.getTime()<((new Date()).getTime()-(24 * 3600 * 1000)+1))
        {
          this.flag = false;
        }
        else
          this.flag = true;
        if(this.day.getMonth() == (new Date()).getMonth()&&this.day.getDay() == (new Date()).getDay())
        {
          for(var i = 0;i<12;i++){
            let time  = this.item[i].substring(0,2);
            time = parseInt(time);
            if(time>this.day.getHours()+1)
            this.isFree[this.item[i]] = true;
            else
            this.isFree[this.item[i]] = false;
          }
        }
        else
        {
            for(var i = 0;i<12;i++){
            this.isFree[this.item[i]] = this.flag;
          }
        }

        for(var i = 0;i<12;i++){
            this.isClick[this.item[i]] = false;
        }
        

      },
      showDialog(){
         this.dialogData.day = this.day.toLocaleDateString();
         this.dialogData.usetime = [];
        for(var i = 0;i<12;i++){
          if(this.isClick[this.item[i]]){
            this.dialogData.usetime.push(this.item[i]);
          }
        }
        this.dialogFormVisible = true;
      },
      closeDialog(){
        this.dialogFormVisible = false;
      },
      getDate(){
        // this.api({
        //   url: "devices/applyDevicesUser",
        //   method: "post",
        //   data: {
        //     "devId": 1, //this.deviceId,
        //     "date":this.day.toLocaleDateString(),
        //   }
        // }).then((date) => {
        //   this.list = date.list;
          

        // })

        // this.dayChange();
        // for(var i = 0;i<this.list.length;i++){
        //   this.info[this.list[i].time] = this.list[i];
        //   //this.isFree[this.list[i].time] = false;
        // }
      },
      updateDialog(){
        for(var i = 0;i < this.dialogData.usetime.length;i++){
            this.api({
              url: "devices/applyDevices",
              method: "post",
              data: {
                "devId":1,//this.deviceId,
                "Date":this.dialogData.day.toLocaleDateString(),
                "time":this.dialogData.usetime[i],
                "anxious":0
              }
            }).catch(e => {
             this.$message.error("服务器出了点问题")
             return ;
          })
        }
        this.$message({
          message: '申请成功 请耐心等待',
          type: 'success'
        });
        this.dialogFormVisible = false;
        
      }
    },
  }
</script>
<style >
  .div-tl{
      margin-top: 20px;
      margin-left: 40px;
      margin-right: 40px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .circle{
    line-height: 20px;
    color: rgba(255, 152, 0, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
  }
  .circle_free{
    line-height: 20px;
    color: rgba(232, 232, 232, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
  }
  .click_bg{
    background-color: rgba(139, 195, 74, 1);
  }
  .myPadding {
    padding-top: 10px;
    /* padding-left: 40%; */
    /* 想往右移可以改变栅格的分布比例 */
  }
  .focus{
    background-color: rgba(139, 195, 74, 1);
  }


</style>
